﻿@using System.Data;
@{
    ViewBag.Title = ViewBag.searchtext;
    string searchtext = ViewBag.searchtext;
    string[] keywords = searchtext.Split(' ');
    string highlightitemname="";
    string highlightitemintro = "";
    string highlightbrand = "";
}
<script src="@Href("~/Scripts/jquery.infinitescroll.js")" type="text/javascript"></script>
<script src="@Href("~/Scripts/jquery.masonry.min.js")" type="text/javascript"></script>

@{
    
    int i;
    DataView searchresult=ViewBag.dataview;
    if (searchresult.Count == 0)
    {
        <div style="text-align:center"><span>抱歉，没有搜索到类似商品</span></div>
    }
    <div id="content" style="visibility:hidden">
    @*<table border="1">
    @for(i=0;i<searchresult.Count;i++)
    {
        <tr>
        <td>@searchresult[i][0].ToString()</td>
        <td>@searchresult[i][1].ToString()</td>
        <td>@searchresult[i][2].ToString()</td>
        <td>@searchresult[i][3].ToString()</td>
        <td>@searchresult[i][4].ToString()</td>
        <td>@searchresult[i][5].ToString()</td>
        </tr>
        
    }
    </table>*@
    
    @for (i = 0; i < searchresult.Count; i++)
    {
        <div class="item" align="center" style="width:160px;">
            <div class="itemimage" align="center" style="width:160px;height:200px;border:1px solid #b49a49; display:table-cell; vertical-align:middle;">
                <div style=" width:148px; border:1px solid #D8D4D4;">
                <a href="@searchresult[i][5].ToString()" target="_blank" class="itemimage">
                    <img class="itemimage" src="@Href("~/uploads/")@searchresult[i][4].ToString()" alt="image" style="border:none"/>
                </a>
                </div>
            </div>
            <div class="itemtext" >
            @{highlightitemname = searchresult[i][1].ToString(); highlightitemintro = searchresult[i][7].ToString();}
            @for(int j=0;j<keywords.Length;j++)
            {
                highlightitemname = highlightitemname.Replace(keywords[j], "<em>" + keywords[j] + "</em>");
                highlightitemintro = highlightitemintro.Replace(keywords[j], "<em>" + keywords[j] + "</em>");
                
            }
            @Html.Raw(highlightitemname)
            &nbsp&nbsp
            @Html.Raw(highlightitemintro)
            </div>
            <div class="itembrand">
            @{highlightbrand = searchresult[i][8].ToString();}
            @for(int j=0;j<keywords.Length;j++)
            {
                highlightbrand = highlightbrand.Replace(keywords[j], "<em>" + keywords[j] + "</em>");
            }
            来自：@Html.Raw(highlightbrand)
            </div>
            <div class="itemprice" >
            @searchresult[i][6].ToString()
            </div>
        </div>      
    }
    </div>
    <div id="nav" style="display:none">
	<a id="next" href="/q/@ViewBag.searchtext/2">next page?</a>
	</div>
}
<script type="text/javascript">
    $(function () {
        //$(window).load(ResizeImages(300, 400));
        var $container = $('#content');
        $container.imagesLoaded(function () {
            ResizeImages(148, 188);
            ResizeDiv();
            //HighlightKeyword('@ViewBag.searchtext');
            $container.masonry({
                itemSelector: '.item',
                columnWidth: function (containerWidth) {
                    return containerWidth / 5;
                }
            });
            $container.css('visibility', 'visible');
        });

        $container.infinitescroll({
            navSelector: '#nav',    // selector for the paged navigation 
            nextSelector: '#nav a',  // selector for the NEXT link (to page 2)
            itemSelector: '.item',     // selector for all items you'll retrieve
            loading: {
                finishedMsg:'No more pages to load.',
                img: 'http://i.imgur.com/6RMhx.gif'
            }
        },
        // trigger Masonry as a callback
            function (newElements) {
                // hide new items while they are loading
                var $newElems = $(newElements).css({ opacity: 0 });
                // ensure that images load before adding to masonry layout
                $newElems.imagesLoaded(function () {
                    // show elems now they're ready
                    ResizeImages(148, 188);
                    ResizeDiv();
                    $newElems.animate({ opacity: 1 });
                    $container.masonry('appended', $newElems, true);
                });
            }
        );

    });
    function ResizeImages(maxwidth,maxheight) {
            var myimg, oldwidth, oldheight;
            //var maxwidth = 550;
            //var maxheight = 880
            var imgs = document.getElementById('content').getElementsByTagName('img');   //如果你定义的id不是article，请修改此处

            for (var i = 0; i < imgs.length; i++) {
                myimg = imgs[i];
                myimg.width = maxwidth;
                myimg.height = maxheight;
//                if (myimg.width > myimg.height) {
//                    if (myimg.width > maxwidth) {
//                        oldwidth = myimg.width;
//                        myimg.height = myimg.height * (maxwidth / oldwidth);
//                        myimg.width = maxwidth;
//                    }
//                } else {
//                    if (myimg.height > maxheight) {
//                        oldheight = myimg.height;
//                        myimg.width = myimg.width * (maxheight / oldheight);
//                        myimg.height = maxheight;
//                    }
//                }
            }
        }
        function ResizeDiv() { //将一行上所有的div设置为该行最高的div的高度
            var $divs = $('.item');
            var maxheight = 0, $div;
            for (var i = 0; i < $divs.length; i++) {
                $div = $divs[i];
                if ($div.offsetHeight > maxheight) maxheight = $div.offsetHeight;
                if ((i + 1) % 5 == 0) {
                    for (var j = i; j > i - 5; j--)
                        $divs[j].style.height = maxheight+'px';
                    maxheight = 0;
                }
            }
        }

//        function HighlightKeyword(key) {//将搜索关键词高亮
//            var $itemtext = $('.itemtext');
//            for (var i = 0; i < $itemtext.length; i++) {
//                $div = $itemtext[i];
//                $div.innerHtml.replace(key, '<em>' + key + '</em>');
//            }

//        }

</script>
